<template>
	<view class="Location">

		<!-- 字母区域 -->
		<view class="Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		<view class="search">
			<u-search :show-action="true" action-text="搜索" :animation="true" v-model="keyword" @custom="searchinput">
			</u-search>
		</view>
		<view class="AutoLocation flex">
			<text class="custom-icon-weizhi1 custom-icon mr5"></text>
			<view class="es-filter-location__text" v-if="gpsStatus==='noAccess'" @tap.stop="openLocationSetting">
				请开启定位权限</view>
			<view class="es-filter-location__text" v-else-if="gpsStatus==='fail'">定位获取失败</view>
			<view class="es-filter-location__text" v-else-if="gpsStatus==='loading'">定位中...</view>
			<view class="es-filter-location__text" v-else>{{location.city}}</view>
			<template v-if="gpsStatus!=='loading'">
				<view class="es-filter-location__line"></view>
				<view class="es-filter-location__relocation-text" @click="getLocations">重新定位</view>
			</template>

			<view class="custom-icon  es-filter-location__relocation-icon"
				:class="{'es-filter-location__relocation-icon--ani':gpsStatus==='loading'}">
				<u-icon name="reload" class=""></u-icon>
			</view>

		</view>
		<scroll-view scroll-y="true" class="ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="HotCity" id="ScrollTop">
				<view class="HotCityTitle">
					<text class="ynq fire"></text>
					<text>热门城市</text>
				</view>
				<view class="HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index">{{item}}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import cityData from "@/config/city.js"
	import {
		useAppStore
	} from "@/store/index.js"
	import {
		storeToRefs
	} from "pinia"
	import {
		MAP_KEY
	} from '@/config/app.js';
	import {
		reactive,
		ref
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app';
	const gpsStatus = ref('success')
	const {
		location
	} = storeToRefs(useAppStore())
	const citylists = ref([])
	const keyword = ref('')
	let cityName = ref('')
	// 当前定位
	const nowCityName = ref('')
	// 热门城市
	const HotCity = ref(['北京', '深圳', '上海', '成都', '广州', '金华'])
	const LatterName = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
		'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
	])
	const CityList = reactive(cityData)
	const LetterId = ref('')

	const searchinput = () => {
		CityList.forEach((item) => {
			item.list.forEach(items => {
				if (items.name === keyword.value) {
					setTimeout(() => {
						uni.showToast({
							'title': '城市切换成功',
							'icon': 'none'
						})
						cityName.value = keyword.value
						uni.setStorage({
							key: 'City_Name',
							data: cityName.value
						})
					}, 2000);
				}

			})
		})
	}

	const getLocations = () => {
		gpsStatus.value = 'loading'
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success(res) {
				let lat = res.latitude;
				let lng = res.longitude;
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?key=${MAP_KEY}&location=${lng},${lat}`,
					method: "GET",
					success(amap_res) {
						location.value.lat = lat
						location.value.lng = lng
						location.value.city = amap_res.data.regeocode.addressComponent.district
						gpsStatus.value = 'success'
					},
					fail() {
						uni.showToast({
							'title': '对不起，数据获取失败！',
							'icon': 'none'
						})
					},

				})
			},
			fail(res) {
				gpsStatus.value = 'noAccess';
				// 用户拒绝了授权
				// #ifdef MP-WEIXIN
				if (showAuthorizeModal) {
					uni.showModal({
						title: '提示',
						content: '未开通定位权限将无法使用完整功能，是否去开启定位权限',
						showCancel: false,
						confirmText: "开通权限",
						success: res => {
							if (res.confirm) {
								// 跳转设置页面
								uni.openSetting({
									success: res => {

									}
								});
							}
						}
					});
				}
				// #endif
			}

		})

	}

	const getLetter = (name) => {
		LetterId.value = name
		uni.pageScrollTo({
			selector: '#' + name,
			duration: 300
		})
	}

	const getStorage = (name) => {
		console.log(name)
		location.value.city = name
		uni.$emit('city',{name:name})
		uni.navigateBack()
	}

	const openLocationSetting = () => {
		// 跳转设置页面
		// #ifdef MP-WEIXIN
		uni.openSetting({
			success: res => {
				this.regps()
			}
		});
		// #endif
	}

	onShow(() => {
		cityName.value = location.value.city
	})
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.search {
		width: 92%;
		margin-left: 4%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.Location {
		height: 100vh;
	}

	.AutoLocation {
		width: calc(100% - 40rpx);
		// background: #F6F8FB;
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.HotCity {
		padding: 20rpx;
	}

	.HotCityTitle {
		padding: 0rpx 0rpx;

		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.HotCityList {
		padding: 20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;

		text {
			width: 32%;
			display: inline-block;
			text-align: center;
			// background: #F6F8FB;
			margin-bottom: 10rpx;
			font-size: 26rpx;
			padding: 20rpx 0;
		}
	}

	.Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.CityList {
		padding: 0px 40rpx 0 20rpx;

		.CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
		}

		.CityLine {
			margin: 20rpx 0px;

			text {
				display: block;
				line-height: 60rpx;
				padding: 0px 10rpx;
				font-size: 30rpx;
				color: #767676;

				&:nth-child(even) {
					// background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}

	.ScrollView {
		height: calc(100vh - 160rpx);
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}

	.es-filter-location__icon {
		font-size: 26rpx;
		color: #1E1E1E;
		margin-right: 5rpx;
	}

	.es-filter-location__text {
		font-size: 26rpx;
		line-height: 26rpx;
		color: #1E1E1E;
	}

	.es-filter-location__line {
		height: 20rpx;
		margin: 0 10rpx;
		border-right: 1rpx solid #ededed;
	}

	.es-filter-location__relocation-text {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888888;
	}

	.es-filter-location__relocation-icon {
		font-size: 22rpx;
		color: #888888;
		margin-left: 5rpx;
	}

	.es-filter-location__relocation-icon--ani {
		animation: spin 1s linear infinite;
		/* 无限旋转动画 */
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>